<template>
	<view>
		<view class="uni-steps" v-if="stepType == 'jewel'">
			<view class="uni-steps-items" :class="'uni-steps-' + direction">
				<view class="uni-steps-item" v-for="(item,index) in options" :key="index" :class="{'uni-steps-process':index === active,'uni-steps-finish':index < active}" v-if="item.show">
					<view class="uni-steps-item-title-container" :style="{color:index === active ? activeColor : ''}">
						<view class="uni-steps-item-title">{{ item.title }}</view>
						<view class="uni-steps-item-desc" v-if="item.desc">{{ item.desc}}</view>
					</view>
					<view class="uni-steps-item-circle-container">
						<view class="uni-steps-item-circle" v-if="index !== active" :style="{backgroundColor:index < active ? activeColor : ''}"></view>
						<image class="line-icon"  v-if="index == active" src="@/static/icons/jewel/line_icon.png"></image>
					</view>
					<view class="uni-steps-item-line" v-if="index !== options.length-1" :style="{backgroundColor:index < active ? activeColor : ''}"></view>
				</view>
			</view>
		</view>
		<view class="uni-steps agentJewel-steps" v-if="stepType == 'agentJewel'">
			<view class="uni-steps-items" :class="'uni-steps-' + direction">
				<view class="uni-steps-item" v-for="(item,index) in agentOptions" :key="index" :class="{'on':agentActive == item.id,'uni-steps-process':item.is_maker}">
					<view class="uni-steps-item-title-container">
						<view class="uni-steps-item-title">{{ item.name }}</view>
					</view>
					<view class="uni-steps-item-circle-container">
						<view class="uni-steps-item-circle" :style="{backgroundColor:item.is_maker ? activeColor : ''}"></view>
					</view>
					<view class="uni-steps-item-line" v-if="index !== agentOptions.length-1" :style="{backgroundColor:item.is_maker ? activeColor : ''}"></view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "uni-steps",
		components: {
			// uniIcon
		},
		props: {
			direction: { //排列方向 row column
				type: String,
				default: 'row'
			},
			activeColor: { //激活状态颜色
				type: String,
				default: '#f9b380'
			},
			active: { //当前步骤
				type: Number,
				default: 0
			},
			stepType: { //步骤类型
				type: String,
				default: 'jewel'
			},
			agentActive: { //当前步骤
				type: Number,
				default: 0
			},
			options: Array ,//数据
			agentOptions: Array, //创客数据
		},
		data() {
			return {}
		}
	}
</script>

<style>
	@charset "UTF-8";

	.uni-steps {
		width: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		position: relative
	}

	.uni-steps-items {
		position: relative;
		display: flex;
		flex-direction: row;
		box-sizing: border-box;
	}

	.uni-steps-items.uni-steps-column {
		margin: 10px 0;
		flex-direction: column
	}

	.uni-steps-items.uni-steps-column .uni-steps-item:after {
		content: ' ';
		position: absolute;
		height: 1px;
		width: 100%;
		bottom: 9px;
		left: 0;
		background-color: #ebedf0;
		transform: scaleY(.5)
	}

	.uni-steps-items.uni-steps-column .uni-steps-item:last-child {
		position: relative
	}

	.uni-steps-items.uni-steps-column .uni-steps-item:last-child:after {
		height: 0
	}

	.uni-steps-items.uni-steps-column .uni-steps-item:last-child .uni-steps-item-title-container {
		
	}

	.uni-steps-items.uni-steps-column .uni-steps-item:last-child .uni-steps-item-circle-container {
		left: 0px;
		right: auto
	}

	.uni-steps-items.uni-steps-column .uni-steps-item-title-container {
		transform: none;
		display: block;
		line-height: 36upx
	}

	.uni-steps-items.uni-steps-column .uni-steps-item-title {
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden
	}

	.uni-steps-items.uni-steps-column .uni-steps-item-desc {
		white-space: normal;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden
	}

	.uni-steps-items.uni-steps-column .uni-steps-item-circle-container {
		left: -17px;
		top: -1px;
		bottom: auto;
		z-index: 1
	}

	.uni-steps-items.uni-steps-column .uni-steps-item-line {
		height: 100%;
		width: 1px;
		left: 0px;
		top: -1px;
		bottom: auto
	}

	.uni-steps-items.uni-steps-column .uni-steps-item.uni-steps-process .uni-steps-item-circle-container {
		bottom: auto;
		left: -21px
	}

	.uni-steps-item {
		flex: 1;
		position: relative;
		padding-top: 40upx;
	}

	.uni-steps-item-title-container {
		display: inline-block;
		color: #999
	}

	.uni-steps-item-title {
		font-size: 24upx;
		text-align: center;
	}

	.uni-steps-item-desc {
		font-size: 20upx;
		text-align: center;
	}

	.uni-steps-item:first-child .uni-steps-item-title-container {
		transform: none;
		margin-left: 0
	}

	.uni-steps-item:last-child {
	}

	.uni-steps-item:last-child .uni-steps-item-title-container {
	
	}

	.uni-steps-item:last-child .uni-steps-item-circle-container {
		
	}

	.uni-steps-item-circle-container {
		position: absolute;
		top: 0px;
		left: 44px;
		z-index: 1
	}

	.uni-steps-item-circle {
		width: 17upx;
		height: 17upx;
		background-color: #999;
		border-radius: 50%
	}

	.uni-steps-item-line {
		background-color: #999999;
		position: absolute;
		top: 6upx;
		left: 100upx;
		width: 100%;
		height: 1px
	}

	.uni-steps-item.uni-steps-finish .uni-steps-item-title-container {
		color: #333
	}

	.uni-steps-item.uni-steps-process .uni-steps-item-circle-container {
		bottom: 3px;
		display: flex
	}
	.line-icon{
		width: 31upx;
		height: 31upx;
		margin-top: -8upx;
		margin-left: -8upx;
	}
	
	/* 珠宝创客 */
	.agentJewel-steps{
		margin-top: 40rpx;
		margin-bottom: 30rpx;
	}
	.agentJewel-steps .uni-steps-item {
		padding-top: 30rpx;
	}
	.agentJewel-steps .uni-steps-item{
		text-align: center;
	}
	.agentJewel-steps .uni-steps-item-line{
		background-color: rgba(244,128,129,0.38);
		height: 4rpx;
		top: 10rpx;
		left: 50%;
	}
	.agentJewel-steps .uni-steps-item-circle{
		background-color: #f48081;
		width: 24rpx;
		height: 24rpx;
	}
	.agentJewel-steps .uni-steps-item-title-container{
		color: #FFFFFF;
		font-size: 26rpx;
	}
	.agentJewel-steps .uni-steps-item-circle-container{
		left: 50%;
		transform: translate(-50%,0);
	}
	.agentJewel-steps .uni-steps-item.uni-steps-finish .uni-steps-item-title-container {
		color: #FFFFFF
	}
	.agentJewel-steps .uni-steps-process .uni-steps-item-circle{
		background: #f9b380;
	}
	.agentJewel-steps .uni-steps-process.on .uni-steps-item-line{
		background-color: rgba(244,128,129,0.38) !important;
	}
</style>